class quanbu {
    dsq = '';
    ycindex = 0;
    index = 0;
    constructor() {
        this.jiedian();
        this.fangfa();
        this.bianli();
    }
    jiedian() {
        this.ulli = document.querySelectorAll('#div1 ul li')
        this.olli = document.querySelectorAll('#div1 ol li')
        this.l = document.querySelector('#goPrev')
        this.r = document.querySelector('#goNext')
        this.div1 = document.querySelector('#div1')
        // console.log(div1);
    }
    fangfa() {
        this.r.onclick = this.you.bind(this)
        this.l.onclick = this.zuo.bind(this)
        this.div1.onmouseover = this.yiru.bind(this)
        this.div1.onmouseout = this.yichu.bind(this)
    }
    bianli() {
        this.olli.forEach((li, key) => {
            li.onclick = () => {
                this.ycindex = this.index
                this.index = key
                console.log(this);
                // 调用下边的函数，让点击之后前一个图片隐藏，当前图片显示
                this.mm()
            }
        })
    }


    you() {
        // 把当前操作的赋值给前一个
        this.ycindex = this.index
        // 每次点击都自增
        this.index++
        // 判断当索引值超过最大索引值的时候让索引值等于0
        if (this.index > this.ulli.length - 1) {
            this.index = 0
        }
        this.mm()
    }
    zuo() {
        // 把当前操作的图片索引值赋值给前一个
        this.ycindex = this.index
        // 让每次点击索引值都自减
        this.index--
        // 判断当索引值小于最小索引值的时候让他等于最大索引值
        if (this.index < 0) {
            this.index = this.ulli.length - 1
        }
        // 调用函数
        this.mm()
    }
    dsqhs() {
        this.dsq = setInterval(() => {
            // 这里可以直接调用r.onclick()替换定时器里边的代码
            this.ycindex = this.index
            this.index++
            if (this.index > this.ulli.length - 1) {
                this.index = 0
            }
            this.mm()
        }, 1000);
    }
    yiru() {
        clearInterval(this.dsq)
    }


    yichu() {
        this.dsqhs()
    }
    mm() {
        // 让前一个在点击之后为空
        this.ulli[this.ycindex].className = '';
        this.olli[this.ycindex].className = '';
        // 让当前操作的图片索引点击之后显示
        this.ulli[this.index].className = 'ac'
        this.olli[this.index].className = 'ac'
    }
}
new quanbu()

